<template>
    <sky-card>
        <view class="goods-box">
            <up-avatar v-if="orderInfo?.goods_image_arr" shape="square"
                       :src="orderInfo?.goods_image_arr[0]" size="120rpx"></up-avatar>
            <view class="content-box">
                <view class="goods-name">{{ orderInfo.goods_name }}</view>
                <view class="money-num">
                    <view>￥{{ orderInfo.goods_price }}</view>
                    <view>x{{ orderInfo.goods_num }}</view>
                </view>
            </view>
        </view>
    </sky-card>
    <sky-card v-if="showInfo">
        <view class="row-data">
            <view class="title">商品总价</view>
            <view class="value">￥{{orderInfo.goods_total_money}}</view>
        </view>
        <view class="row-data">
            <view class="title">积分抵用</view>
            <view class="value">￥{{orderInfo.deduct_money}}</view>
        </view>
        <view class="row-data">
            <view class="title">运费</view>
            <view class="value">￥{{orderInfo.shipping_cost}}</view>
        </view>
        <view class="row-data order-money">
            <view class="title"></view>
            <view class="value">合计：
                <text class="money">￥{{orderInfo.order_money}}</text>
            </view>
        </view>
    </sky-card>
</template>
<script setup>
const props = defineProps({
    orderInfo: {
        type: Object,
        default: () => {
            return {}
        }
    },
    showInfo:{
        type: Boolean,
        default: true
    }
})
</script>
<style scoped lang="scss">
.goods-box {
    display: flex;
    align-items: center;
    gap: 18rpx;
    box-sizing: border-box;
    
    .content-box {
        height: 120rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .money-num {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
.row-data{
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 44rpx;
}
.order-money{
    margin-top: 12rpx;
    border-top: 2rpx solid #eee;
    padding-top: 12rpx;
    .money{
        color: red;
        font-size: 36rpx;
    }
}
</style>
